<template>
    <div id="app-container" style="margin: 10px 50px">
      <el-form :inline="true" :model="student" class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input v-model="FormData.username" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="所属学院">
          <el-select v-model="FormData.departmentId" @change="classInfo($event)" placeholder="所属学院">
            <el-option
              v-for="item in student.optionsDep"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属学年">
          <el-select v-model="FormData.year" placeholder="所属学年">
            <el-option
              v-for="item in student.optionsYear"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级名称">
          <el-select v-model="FormData.className" placeholder="班级名称">
            <el-option
              v-for="item in student.optionsClass"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级班别">
          <el-select v-model="FormData.classNo" placeholder="班别">
            <el-option
              v-for="item in student.optionsClassNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="default" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
  
      <el-table :data="studentInfo" stripe style="width: 100%">
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
        <el-table-column prop="departmentName" label="学院名称" width="180">
            
        </el-table-column>
        <el-table-column prop="fullInfo" label="班级名称" width="190">
        </el-table-column> 

        <el-table-column prop="workStatusStr" label="实习情况">
        </el-table-column> 

        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">
            <router-link :to="'/student/update/' + scope.row.id">
              <el-button type="primary" >修改</el-button>
            </router-link>
  
            <el-button @click="deleteInfo(scope.row)" type="danger" 
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import dictApi from "@/api/dict";
  import studentApi from "@/api/student";
  
  export default {
    data() {
      return {
        curPage: 1,
        pageSize: 10,
        total: 0,
        student: {
          username: "",
          optionsDep: [],
          optionsYear: [],
          optionsClass: [],
          optionsClassNo: []
        },
        FormData: {
          departmentId: "",
          username: "",
          year: "",
          className: "",
          classNo: ""
        },
        studentInfo: [],
      };
    },
    created() {
      this.init();
    },
    methods: {
        classInfo(event){

            dictApi.getClassNameInfo(event).then(resp=>{
                    this.student.optionsClass = resp.data.list;
                    console.log(resp.data.list,"班级");
            })

        },
      init() {
        // 查询所有的教师信息
        studentApi
          .getStudentList(this.pageSize, this.curPage, this.FormData)
          .then((resp) => {
            this.studentInfo = resp.data.list;
            this.total = resp.data.total;
          });
        // 搜索栏学院填充
        dictApi.getDepInfo().then((resp) => {
          this.student.optionsDep = resp.data.list;
     

        });
        // 学年名称填充
        dictApi.getYearInfo().then(resp=>{
            this.student.optionsYear = resp.data.list;
        })
        // 班级名称填充
       

        // 班别填充
        dictApi.getClassNoInfo().then(resp=>{
            this.student.optionsClassNo = resp.data.list;
        })
      },
      onSubmit() {
        studentApi
          .getStudentList(this.pageSize, this.curPage, this.FormData)
          .then((resp) => {
            this.studentInfo = resp.data.list;
            this.total = resp.data.total;
          });
      },
      clear() {
        (this.FormData = {});
        studentApi
          .getStudentList(this.pageSize, this.curPage, this.FormData)
          .then((resp) => {
            this.studentInfo = resp.data.list;
            this.total = resp.data.total;
          });
      },
      deleteInfo(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(row.id);
            studentApi.deleteStudent(row.id).then(resp=>{
                studentApi
          .getStudentList(this.pageSize, 1, this.FormData)
          .then((resp) => {
            this.studentInfo = resp.data.list;
            this.total = resp.data.total;
          });
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      },
      // 页数发生变化
      handleCurrentChange() {
        studentApi
          .getStudentList(this.pageSize, this.curPage, this.FormData)
          .then((resp) => {
            this.studentInfo = resp.data.list;
            this.total = resp.data.total;
          });
      },
    },
  };
  </script>
  
  <style></style>
  